<template>
    <view class="card-container">
        <view class="card-data-item">
            <view class="text">期末应收(元)</view>
            <view class="value">{{ debt.WjsTotal }}</view>
        </view>
        <view class="card-data-item">
            <view class="text">期初应收(元)</view>
            <view class="value">{{ debt.TotalMoney }}</view>
        </view>
        <view class="card-data-item">
            <view class="text">本期增加(元)</view>
            <view class="value">{{ debt.HjTotal }}</view>
        </view>
        <view class="card-data-item">
            <view class="text">本期减少(元)</view>
            <view class="value">{{ debt.BdJsTotal }}</view>
        </view>
        <view class="h-line"></view>
        <view class="v-line"></view>
    </view>
</template>

<script>
export default {
    props: {
        debt: {
            type: Object,
            default: () => ({}),
        },
    },
}
</script>

<style lang="scss">
.card-container {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    height: 336rpx;
    margin: 24rpx 32rpx;
    padding: 18rpx 24rpx;
    box-sizing: border-box;
    border-radius: 24rpx;
    background-color: $app-color-main;

    .card-data-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 50%;
        color: $color-white;
        font-size: 28rpx;

        .value {
            font-size: 40rpx;
            font-weight: 700;
        }
    }

    .h-line {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: calc(100% - 48rpx);
        height: 1rpx;
        background-color: $uni-border-bottom-color;
    }

    .v-line {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 1rpx;
        height: calc(100% - 36rpx);
        background-color: $uni-border-bottom-color;
    }
}
</style>
